<template>
  <div>
    <Table
      ref="tableRef"
      :query="data.query"
      :content="true"
      @get-list="getData"
      :isPagination="true"
      :pageSize="4"
      :pageSizeArr="[4, 8, 12, 16]"
    >
      <template #content>
        <div class="video-card">
          <div
            v-for="(item, index) in frameSrc"
            :key="index"
            class="video-card-item"
            @click.stop="getgo(item)"
          >
            <iframe
              v-if="item.url && item.token"
              :src="`https://open.ys7.com/console/jssdk/pc.html?accessToken=${item.token}&url=${item.url}&themeId=pcLive`"
              width="100%"
              height="405px"
            />
            <div v-if="item.url && item.token" class="video-card-item-name">
              {{ item.stationName }}
            </div>
            <div class="no-data" v-else>暂未找到播放地址</div>
          </div>
        </div>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup name="videosurveillanceList">
import Table from '@/components/table/index.vue';
import { queryMonitors } from '@/service/apis/monitor';

const router = useRouter();

const tableRef = ref();
const frameSrc = ref();

const data = reactive({
  query: [
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
  ],
});

const getgo = (item: any) => {
  router.push({
    name: 'videosurveillanceDetail',
    query: {
      stationId: item.stationId,
      stationName: item.stationName,
    },
  });
};

const getData = (page: any, search: any) => {
  nextTick(() => {
    let form: any = search.ruleForm?.stationName || '';
    queryMonitors(form, page).then((res: any) => {
      if (res) {
        if (
          page.pageNo !== 1 &&
          (!res.dataList || res.dataList?.length === 0)
        ) {
          page.pageNo--;
          getData(page, search);
          return;
        }
        nextTick(() => {
          frameSrc.value = res.dataList || [];
          tableRef.value.setTable({
            total: res.totalCount,
            table: res.dataList,
          });
        });
      }
    });
  });
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';

.video-card {
  box-sizing: border-box;
  padding: 30px;
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  // min-height: 700px;
  width: 100%;
  &-item {
    position: relative;
    width: 50%;
    height: 405px;
    &-name {
      color: #fff;
      font-size: 18px;
      position: absolute;
      right: 40px;
      bottom: 50px;
    }
  }
  .no-data {
    width: 100%;
    height: 400px;
    border: 2px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #000;
  }
}
iframe {
  pointer-events: none;
}
</style>
